<template>
  <div class="followAdd" v-loading="detailInfoShow">
    <!-- 筛选按钮 -->
    <div
      class="search-button"
      v-if="pageType !== 'detail' && pageType !== 'check'"
    >
    <el-button
        v-if="pageType !== 'detail' && pageType !== 'check'"
        class="btn submit"
        @click="handleAddSave(followFormRef)"
        ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
        >完结</el-button
      >
      <el-button
        v-if="pageType !== 'detail' && pageType !== 'check'"
        class="btn save"
        @click="handleAddSave(followFormRef)"
        ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
        >保存</el-button
      >
      <el-button class="btn back" @click="handleBack"
        ><el-icon class="icon" color="#fff"> <Back /> </el-icon>返回</el-button
      >
    </div>
    <el-collapse v-model="activeNames">
      <!-- 基础信息 -->
      <el-collapse-item
        name="1"
        v-if="pageType !== 'detail' && pageType !== 'check'"
        class="transform-down"
      >
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">分配信息</span>
        </template>
        <div class="follow-info">
          <el-form
            :model="form"
            ref="followFormRef"
            :rules="queryRules"
            label-width="130px"
            v-enterToNext
            :disabled="pageType === 'detail'"
          >
            <div class="allot-box">
              <div v-if="taskListRadio.length > 0" class="allot-box-radio">
                <div
                  v-for="item in taskListRadio"
                  :key="item.id"
                  style="margin-bottom: 10px"
                >
                  <el-radio
                    v-model="taskRadio"
                    :label="item.id"
                    border
                    size="mini"
                  >
                    {{ item.proTaskName }}
                  </el-radio>
                </div>
              </div>
              <el-row :gutter="0">
                <el-col :span="12">
                  <el-form-item label="任务名称" prop="taskType">
                    <el-select
                      v-model="form.taskType"
                      style="width: 100%"
                      placeholder="请选择"
                      size="mini"
                      clearable
                      @change="handleTaskType"
                    >
                      <el-option
                        v-for="item in taskOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="执行人" prop="allotRelList">
                    <el-select
                      v-model="form.allotRelList"
                      multiple
                      style="width: 100%"
                      placeholder="请选择"
                      size="mini"
                      filterable
                      clearable
                    >
                      <el-option key="0" label="" value="" disabled>
                        <span style="float: left; color: #8492a6"> 公司 </span>
                        <span style="margin: 0 100px 0 120px; color: #8492a6">
                          部门
                        </span>
                        <span
                          style="float: right; color: #8492a6; font-size: 13px"
                        >
                          姓名
                        </span>
                      </el-option>
                      <el-option
                        v-for="item in personOptions"
                        :key="item.userId"
                        :label="item.userName"
                        :value="item.userId"
                      >
                        <span style="float: left; color: #8492a6">
                          {{ item.companyName }}
                        </span>
                        <span style="margin: 0 100px 0 90px; color: #8492a6">
                          {{ item.deptName }}
                        </span>
                        <span style="float: right; font-size: 13px">
                          {{ item.userName }}
                        </span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="计划开始时间" prop="startTime">
                    <el-date-picker
                      v-model="form.startTime"
                      size="mini"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="date"
                      placeholder="请选择"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="计划结束时间" prop="endTime">
                    <el-date-picker
                      v-model="form.endTime"
                      size="mini"
                      value-format="yyyy-MM-dd"
                      type="date"
                      placeholder="请选择"
                      @change="tiemChange"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注">
                    <el-input
                      v-model="form.remark"
                      :disabled="
                        taskListRadio.some((item) => item.id === form.id)
                      "
                      type="textarea"
                      maxlength="2000"
                      rows="2"
                      style="width: 100%"
                      placeholder="请输入"
                      clearable
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
                <!-- 项目启动会 -->
                <el-col v-if="form.taskType === 0" :span="12">
                  <el-form-item label="交付文件">
                    <el-input
                      ref="name"
                      v-model="empty"
                      disabled
                      placeholder="执行人填项"
                      clearable
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
                <!-- 现场勘察 -->
                <template v-if="form.taskType === 1">
                  <el-col :span="12">
                    <el-form-item label="选择省市区">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="详细地址">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="物业名称">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="物业联系方式">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="所属派出所">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="民警联系方式">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="现场实地照片">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="外包用工合同">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="物业租赁合同">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                </template>
                <!-- 制定项目方案 -->
                <el-col v-if="form.taskType === 2" :span="12">
                  <el-form-item label="防区布防方案">
                    <el-input
                      ref="name"
                      v-model="empty"
                      disabled
                      placeholder="执行人填项"
                      clearable
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
                <template v-if="form.taskType === 3">
                  <el-col :span="12">
                    <el-form-item label="选择防区">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="添加时间">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="系统自动获取"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="设备名称">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备类型">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备型号">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="安装方式">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="生产厂家">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="系统自动获取"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="SIM卡信息">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="设备ID">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="IP地址">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="路由器品牌型号">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="用电协议">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="配件清单表">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="现场设备照片">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="现场完成照片">
                      <el-input
                        ref="name"
                        v-model="empty"
                        disabled
                        placeholder="执行人填项"
                        clearable
                        size="mini"
                      />
                    </el-form-item>
                  </el-col>
                </template>
                <!-- 飞行验收 || 项目验收 -->
                <el-col
                  v-if="form.taskType === 4 || form.taskType === 5"
                  :span="12"
                >
                  <el-form-item label="上传方案">
                    <el-input
                      ref="name"
                      v-model="empty"
                      disabled
                      placeholder="执行人填项"
                      clearable
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
      </el-collapse-item>
      <!-- 跟进记录 -->
      <el-collapse-item name="2" v-if="pageType == 'detail'">
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">跟进记录</span>
        </template>
        <div class="follow-detail-info">
          <!-- 表格数据 -->
          <el-table
            :data="form.tableData"
            border
            height="100%"
            :header-cell-style="{ background: 'red' }"
          >
            <el-table-column
              label="跟进时间"
              prop="createTime"
              :show-overflow-tooltip="true"
              width="120"
              align="center"
            />
            <el-table-column
              label="跟进内容"
              prop="content"
              :show-overflow-tooltip="true"
              min-width="160"
              align="center"
            />
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import {
  getEndFollowApi,
  addFollowApi,
  getProjectApi,
} from "@/api/sales/project";
import { ElMessage, ElMessageBox } from "element-plus";
const emit = defineEmits([
  // 刷新父组件表格数据
  "refreshList",
  // 更新跟进组件显隐
  "update:followAddShow",
]);
const props = defineProps({
  // 操作类型
  pageType: {
    type: String,
    default: "add",
  },
});
// 折叠栏默认展开
const activeNames = ref(["1", "2", "3"]);
// 客户表单引用
const followFormRef = ref();
// 详情加载效果
const detailInfoShow = ref(false);
// 输入框引用
const refInput = ref();
// 跟进表单引用
const followFormTemplate = {
  id: null,
  // 任务类型
  taskType: null,
  // 执行人
  allotRelList: [],
  // 计划结束时间
  endTime: "",
  // 实施分配表id
  implAllotlId: null,
  // 项目id
  proId: null,
  // 备注
  remark: "",
  // 计划开始时间
  startTime: "",
};
const taskRadio = ref(-1);
// 已填写任务列表
const taskListRadio = ref([]);
// 任务列表
const taskList = ref([]);
// 任务列表字典
const taskOptions = ref([
  {
    label: "项目启动会",
    value: 0,
  },
  {
    label: "现场勘察",
    value: 1,
  },
  {
    label: "制定项目方案",
    value: 2,
  },
  {
    label: "现场安装/调试",
    value: 3,
  },
  {
    label: "飞行验收",
    value: 4,
  },
  {
    label: "项目验收",
    value: 5,
  },
]);

const data = reactive({
  // 跟进表单
  form: JSON.parse(JSON.stringify(followFormTemplate)),
  // 跟进表单校验规则
  queryRules: {
    content: [{ required: true, message: "请输入跟进内容", trigger: "blur" }],
    followTime: [
      { required: true, message: "请选择下次跟进", trigger: "change" },
    ],
  },
});
const { form, queryRules } = toRefs(data);

watch(taskRadio, (value) => {
  // 监听tab变化时将筛选条件数据恢复至原始数据
  if (value !== -1) {
    const result = taskListRadio.value.find((item) => item.id === value);
    form.value = {
      ...result,
      proId: form.value.proId,
      allotRelList: result.executor,
    };
  }
});

/**
 * @description: 保存
 * @param {Object} followFormRef 跟进表单引用
 */
const handleAddSave = async (followFormRef) => {
  if (!followFormRef) return;
  await followFormRef.validate(async (valid, fields) => {
    if (valid) {
      ElMessageBox.confirm("确定保存以上数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "confirmBtnClass",
        cancelButtonClass: "cancelBtnClass",
      })
        .then(async () => {
          const res = await addFollowApi(form.value);
          if (res.code === 200) {
            emit("update:followAddShow", false);
            emit("refreshList", false);
            ElMessage.success(res.msg);
            form.value = JSON.parse(JSON.stringify(followFormTemplate));
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {});
    }
  });
};

/**
 * @description: 任务名称选择
 */
const handleTaskType = () => {
  if (taskRadio.value !== -1) {
    form.value.id = null;
    form.value.allotRelList = [];
    form.value.startTime = "";
    form.value.endTime = "";
    form.value.remark = "";
    taskRadio.value = -1;
    // 切换时清空表单校验
    // this.$nextTick(() => {
    //   this.$refs.form.clearValidate()
    // })
  }
  // 匹配左侧单选框
  const result = taskListRadio.value.find(
    (item) => item.taskType === form.value.taskType
  );
  if (result) {
    taskRadio.value = result.id;
  }
};

/**
 * @description: 返回
 */
const handleBack = () => {
  ElMessageBox.confirm("确定返回上一级吗?以上数据未保存将会丢失!", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "confirmBtnClass",
    cancelButtonClass: "cancelBtnClass",
  })
    .then(async () => {
      emit("update:followAddShow", false);
      form.value = JSON.parse(JSON.stringify(followFormTemplate));
    })
    .catch(() => {});
};

/**
 * @description: 处理详情信息
 * @param {Number} id
 */
const handleDetailInfo = async (id) => {
  try {
    form.value.projectId = id;
    if (props.pageType === "follow") {
      const res = await getEndFollowApi(id);
      if (res) {
        form.value.lastTime = res.createTime;
      }
    } else {
      const res = await getProjectApi(id);
      form.value.tableData = res.proFollowUpRecordInfoVos;
    }
    taskListRadio.value = [
      {
        id: 93,
        proId: 58,
        proTaskName: "项目启动会",
        taskType: 0,
        startTime: "2023-12-05 00:00:00",
        endTime: "2023-12-07 23:59:59",
        remark: "21",
        executors: "158,12",
        executor: [158, 12],
      },
      {
        id: 94,
        proId: 58,
        proTaskName: "现场勘察",
        taskType: 1,
        startTime: "2023-12-10 00:00:00",
        endTime: "2023-12-30 23:59:59",
        remark: "1",
        executors: "129,12,158,22",
        executor: [129, 12, 158, 22],
      },
      {
        id: 95,
        proId: 58,
        proTaskName: "现场安装/调试",
        taskType: 3,
        startTime: "2023-12-12 00:00:00",
        endTime: "2024-01-04 23:59:59",
        remark: "1",
        executors: "12",
        executor: [12],
      },
    ];
  } catch (error) {}
};

onMounted(() => {
  if (props.pageType !== "detail" && props.pageType !== "check") {
    nextTick(() => {
      setTimeout(() => {
        refInput.value.focus();
      }, 800);
    });
  }
});

defineExpose({
  handleDetailInfo,
});
</script>
<style lang="scss" scoped>
.followAdd {
  padding: 20px;
  width: 100%;
  height: 100%;
  .follow-info {
    padding: 20px 10px 5px 10px;
    background-color: #f0f0f0;
    margin: 10px 0;
  }
  .follow-detail-info {
    margin-top: 20px;
  }
  .allot-box {
    display: flex;
    &-radio {
      width: 20%;
    }
  }
  .el-radio {
    background-color: #fff;
  }
}
</style>
